<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'teacherhome' }">课题打分</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="new-box">
            <el-row>
                <el-col :span="12">
                    <div class="probox">
                        <p>班级选择:</p>
                        <el-select v-model="form.xmbjid" @click.native="getbanjilist">
                            <el-option :value="bj.bjid" :label="bj.bjname" v-for=" (bj,i) in banjiList " :key="i" ></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col  :span="12">
                     <div class="probox">
                        <p>课题类别:</p>
                        <el-select v-model="form.xmcategory" @click.native="getcategories">
                             <el-option :value="cate.procode" :label="cate.proname" v-for="(cate,i) in categories" :key="i"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col  :span="12">
                     <div class="probox">
                        <p>学生名字搜索:</p>
                        <el-input v-model="form.username" style="width:200px"></el-input>
                    </div>
                </el-col>
                <el-col  :span="12">
                     <div class="probox">
                         <a id="dlink"  style="display:none;"></a>
                        <el-button type="primary" @click="exportExcel('mytable',form.xmbjid,form.xmbjid.toUpperCase()+'-'+form.xmcategory.toUpperCase()+'.xls')">导出Excel</el-button>
                    </div>
                </el-col>
            </el-row>
             
            <div style=" margin-top: 30px;">
                <div id="main" style="width: 600px;height:400px; float: right; "></div>
                <div id="main1" style="width: 600px;height:400px;"></div>
            </div>
            <el-table
                :data="xmlist.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                style="width:100%;margin-top:20px"
                id="mytable"
                :row-class-name="tableRowClassName"
            >
                <el-table-column label="序号"  type="index"></el-table-column>
                 <el-table-column label="学员" >
                    <template slot-scope="scope">
                        <el-tag effect="dark"  type="primary"> {{scope.row.username}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="班级" >
                    <template slot-scope="scope">
                        <el-tag type="success"> {{scope.row.xmbjname}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="科学名称" prop="xmname"></el-table-column>
                <el-table-column label="科学地址" >
                    <template slot-scope="scope">
                        <a :href="scope.row.xmlink" target="_blank"  >{{scope.row.xmlink}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="二维码" >
                    <template slot-scope="scope">
                        <img @click="seeBigCode(scope.row.xmlink)" src="../../assets/barcode.png" style="cursor:pointer" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="课题类别" >
                    <template slot-scope="scope">
                        <el-tag  type="primary" > {{scope.row.xmcategorytext}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="课题作业描述" prop="xmdesc"></el-table-column>
                <el-table-column label="技术要点" prop="xmtech"></el-table-column>
                <el-table-column label="难点亮点" prop="xmbug"></el-table-column>
                <el-table-column label="操作" prop="score" sortable>
                    <template slot-scope="scope">
                        <el-button effect="dark"  type="success"  size="mini" @click="showdialog(scope.row._id)" v-if="scope.row.score==0" > 打分 </el-button>
                        <el-tag effect="dark" :type="scope.row.score | scoreColor"  v-if="scope.row.score!=0" > {{scope.row.score}} </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="课题评分"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-input v-model="xmscore" placeholder="请输入课题作业分数"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.prevent.enter="changeScore" >确 定</el-button>
            </span>
        </el-dialog>
         <div class="block">
    
     <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]" 
            :page-size="pagesize"        
            layout="total, sizes, prev, pager, next, jumper"
            :total="xmlist.length">   
    </el-pagination>
  </div>
       
        
    </div>
</template>

<script>

import {mymixins} from "@/utils"
import {mapState,mapMutations} from "vuex"
export default {  
    mixins:[mymixins],
  
    data(){
        return {
            xmlist:[],
            form:{
                xmcategory:"",
                xmbjid:''
            },
            dialogVisible:false,
            xmscore:"",
            _id:'',
            currentPage:1, //初始页
                pagesize:5,    //    每页的数据
               
        }
    },
    watch:{
        form:{
            deep:true,
            handler(newVal){
                this.$axios.post("/vue/getallxm",{
                    ...newVal
                })
                .then(res=>{
                    if(res.data.type){
                        this.xmlist =res.data.result;
                    }
                })
            }
        }
    },
    computed:{
        ...mapState(['banjiList','userinfo','categories'])
    },
    methods:{

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
         this.pagesize = val;

      },
      handleCurrentChange(val) {
        this.currentPage = val;
        
      },
         
      tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
            return 'warning-row';
            } else   {
            return 'success-row';
            }
            return '';
        },

      
        handleClose(){
            this.dialogVisible = false;
        },
        changeScore(){
            console.log(this._id);
            this.$axios.post("/vue/setxmscore",{
                _id:this._id,
                score:this.xmscore
            }).then(res=>{
                if(res.data.type){
                    this.dialogVisible = false;
                    this.xmlist = this.xmlist.map((item)=>{
                        if(item._id==this._id){
                            item.score = this.xmscore
                        }
                        return item;
                    })
                    this.xmscore = ""
                }
            })
        },
        showdialog(_id){
            this.dialogVisible = true;
            this._id=_id;
        },
        ...mapMutations(['changebanjiList','changecategories']),
        getbanjilist(){
            if(this.banjiList.length==0){
                this.$axios.post("/vue/getbanjilist",{
                    xk:this.userinfo.xkid,
                    sch:this.userinfo.schid
                }).then(res=>{
                    if(res.data.type){
                        this.changebanjiList(res.data.result)
                    }
                })
            }
        },
        getcategories(){
            if(this.categories.length==0){    // vuex 临时缓存 
                this.$axios.post("/vue/getpronamelist",{
                    xkid:this.userinfo.xkid
                })
                .then(res=>{
                    if(res.data.type){
                        this.changecategories(res.data.result)
                       
                    }
                })
            }
        },
        exportExcel(table, name, filename){
            if(this.form.xmbjid&&this.form.xmcategory){
                var uri = 'data:application/vnd.ms-excel;base64,',
                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
                format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };

                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
    
                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();
            }else{
                this.$message.error("请选择班级和课题后导出!")
            }
        },
        dd(arr){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = this.$echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: 'ECharts 入门示例'
                        },
                        tooltip: {},
                        legend: {
                            data:['销量']
                        },
                        xAxis: {
                            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: arr
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option); 
                },

        dd2(a,b,c,d,e){

             var myChart = this.$echarts.init(document.getElementById('main1'));
          var   option = {
                backgroundColor: '#2c343c',

                title: {
                    text: '成绩分部图',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                // visualMap: {
                //     show: false,
                //     min: 80,
                //     max: 600,
                //     inRange: {
                //         colorLightness: [0, 1]
                //     }
                // },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: a, name: 'A'},
                            {value: b, name: 'B'},
                            {value: c, name: 'C'},
                            {value: d, name: 'D'},
                            {value: e, name: 'E'}
                        ].sort(function (a, b) { return a.value - b.value; }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(250, 250, 250, 1)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 1)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        // itemStyle: {
                        //     color: '#ccc',
                        //     shadowBlur: 200,
                        //     shadowColor: 'rgba(10, 10, 10, 0.5)'
                        // },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
             };
                  myChart.setOption(option); 
        }
    },
    mounted(){
        this.$axios.post("/vue/getallxm",{
           
        })
        .then(res=>{
            if(res.data.type){
                this.xmlist =res.data.result;
                console.log(res.data.result[0].score);
                var arr = []
                var arr2= []
                var a = 0, b = 0, c = 0,d = 0,e = 0
                 
                 res.data.result.forEach(item => {
                   arr.push(item.score) 
                    var n = parseInt(item.score/10);
                    switch(n){
                        case 9:
                        a++;
                        break;
                        case 8:
                        b++;
                        break;
                        case 7:
                        c++;
                        break;
                        case 6:
                        d++;
                        break;
                        default:
                        e++;
                        break;
                    }
                
                });
                this.dd(arr)
                this.dd2(a,b,c,d,e)
                console.log(arr);

            }
                
                  

        }) 
        
    }
}
</script>



<style scoped>
.probox{
    display:flex;
    margin-top:20px;
    /* justify-content: center; */
    align-items: center;
   
}
.probox p{
    padding:0 5px;
}


</style>
